<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
	<pre>
	<!-- 1、组件名称如果是驼峰写法，如果在页面中需要要全部转成小写，而且要用中划线进行连接 -->
	<!-- 2、如果组件在模板字符串中，不需要转成小写形式 -->
	</pre>
	<div id="app">
		<hello-world></hello-world>
    </div>

	
    <script>
		Vue.component('HelloWorld',{
			data:function(){
				return{
					msg:'JERRY',
					age:12
				}
			},template:`
			<div>
				<p>{{msg}}</p>
				<p>{{age}}</p>
				<button @click="handle">点击</button>
			</div>
			`,
			methods:{
				handle:function(){
					this.age++
				}
			}
		})
        var vm = new Vue({
            el: '#app'
            ,data: {
			}
			
        })
		
	</script>
</body>

</html>